<template>
	<view style="padding: 20rpx 32rpx;">
		<view class="usermain u-bdr-12">
			<view class="usermain-item item-padding u-border-bottom" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="label_text">标题</view>
				<input type="text" v-model="courseDetailsName" placeholder="请输入标题,例如第一集" style="font-weight: 500;
font-size: 24rpx;
color: #333333;
text-align: right;
"/>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text" style="padding-bottom: 26rpx;">封面图</view>
				<view class="valuscss">
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button open-type="chooseAvatar" @chooseavatar="onChooseTitleImg">
						<image style="width: 111rpx;height: 111rpx;" :src="titleImg?titleImg:require('@/hl/upload_logo.png')"></image>
					</button> -->
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<!-- <image :src="titleImg?titleImg:require('@/hl/upload_logo.png')" mode="" @click="uploadImgTitleImg"
						style="width: 111rpx;height: 111rpx;"></image> -->

					<view style="display: flex;flex-wrap: wrap;">

						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;" v-if='titleImg'
							@click.stop="previewImage(0,[titleImg])">
							<image src='../../../static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="titleImg=''"></image>
							<image :src='titleImg' mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
						</view>
						
						
													
						<view style="width: 150rpx;
							height: 150rpx;
							background: #F7F7F7;
							display: flex;
							align-items: center;
							justify-content: center;
							"
							 v-if='titleImg==""'
							 @click="uploadImgTitleImg"
							>
								<image src='/static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
										@click="uploadImgTitleImg"></image>
								</view>

					</view>


					<!-- #endif -->
				</view>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text" style="padding-bottom: 26rpx;">上传视频</view>
				<view class="valuscss">
					<!-- #ifdef MP-WEIXIN -->
					<!-- 	<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image style="width: 111rpx;height: 111rpx;" :src="bannerImg?bannerImg:require('@/hl/upload_logo.png')"></image>
					</button> -->
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view style="display: flex;flex-wrap: wrap;">

						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;" v-if='videoUrl'>
							<image src='../../../static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="videoUrl=''"></image>


							<video id="myVideo" :src="videoUrl" enable-danmu danmu-btn controls
								style="width: 150rpx;height: 150rpx;"></video>
						</view>
						
						<view style="width: 150rpx;
							height: 150rpx;
							background: #F7F7F7;
							display: flex;
							align-items: center;
							justify-content: center;
							"
							  v-if='videoUrl==""'
							 @click="uploadImgBannerImg"
							>
								<image src='/static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
								></image>
								</view>
								
								
				
					</view>

					<!-- #endif -->
				</view>
			</view>
			<!-- <view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">集价格</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="decimal" v-model="price" placeholder="请输入集价格" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">点赞数</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="number" v-model="goodNum" placeholder="请输入点赞数" />
					</view>
				</view>
			</view> -->
			<view class="usermain-item item-padding u-border-bottom" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="label_text">排序</view>
				<view class="sort_box">
					<input type="number" v-model="sort" placeholder="请输入标题内容" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					text-align: right;
					"/>
					<!-- <image src='/static/images/index/v_5.png' @click="sortFunc(0)"></image>
					<text>{{sort}}</text>
					<image src='/static/images/index/v_6.png' @click="sortFunc(1)"></image> -->
				</view>
				<!-- <view class="valuscss">
					<view class="cu-form-group">
						<input type="number" v-model="sort" placeholder="请输入排序" />
					</view>
				</view> -->
			</view>
			<!-- <view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">是否收费</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group v-model="isPrice">
							<u-radio name="1">
								是
							</u-radio>
							<u-radio name="2">
								免费
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view> -->
			<!-- <view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">是否推荐</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group v-model="good">
							<u-radio name="1">
								推荐
							</u-radio>
							<u-radio name="2">
								不推荐
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view> -->
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">视频介绍</view>
				<u-input v-model="content" type="textarea"  placeholder="请输入视频介绍内容" style="font-weight: 500;
font-size: 24rpx;
color: #333333;"
/>
			</view>
		</view>
		<view class="footer-btn">
			<view class="usermain-btn" @click="messagebtn()">立即提交</view>
		</view>
		<u-popup v-model="showJd" round="10" closeOnClickOverlay="false" mode="center" border-radius="14"
			style="text-align: center;">
			<!-- {{progressBar}} -->
			<view class="up_pro_box_content">
				<text>上传进度</text>
				<image src='/static/images/index/pro.png'></image>
				<text>{{progressBar}}%</text>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import configdata from '../../../common/config.js';
	export default {
		data() {
			return {
				showJd: false,
				courseId: null,
				courseType: 1,
				courseDetailsName: '',
				videoUrl: '',
				isPrice: 1,
				price: '2',
				titleImg: '',
				goodNum: '1',
				good: 1,
				content: '',
				sort: 0,
				editType: 0, //0add 1edit
				courseDetailsId: null,
				progressBar: 0
			};
		},

		onLoad(e) {
			// this.getUserInfo()
			this.courseId = e.courseId
			this.editType = e.type
			if (e.type == 0) {
				uni.setNavigationBarTitle({
					title: '新增视频'
				});
			} else {
				this.courseDetailsId = e.courseDetailsId
				uni.setNavigationBarTitle({
					title: '编辑视频'
				});
				this.getCourseInfo(e.courseDetailsId)
			}

		},
		methods: {
			sortFunc(e){
				if (e==0){
					this.sort--
				}else{
					this.sort++
				}
			},
			//放大图片
			previewImage(e, url) {
				uni.previewImage({
					urls: url,
					current: e
				});
			},

			// 资源详情 获取
			getCourseInfo(courseDetailsId) {

				this.$u.get("/app/user/selectCourseDetailsInfoByIdByApp?id=" + courseDetailsId).then(
					res => {
						if (res.code === 0) {

							this.courseType = res.data.courseType
							this.courseDetailsName = res.data.courseDetailsName
							this.videoUrl = res.data.videoUrl
							this.isPrice = res.data.isPrice
							this.price = res.data.price
							this.titleImg = res.data.titleImg
							this.goodNum = res.data.goodNum
							this.content = res.data.content
							this.sort = res.data.sort
							this.good = res.good

						}
					});






			},
			// titleImg
			onChooseTitleImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			// bannerImg
			onChooseBannerImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.bannerImg.push(url.data)
						uni.hideLoading();
					}
				});

			},
			uploadImgTitleImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.titleImg = url.data
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			uploadImgBannerImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择视频"],
					success(e) {
						var index = e.tapIndex
						uni.chooseVideo({
							sourceType: ['album'], //从相册选择
							compressed: false,
							success: function(res) {
								that.showJd = true
								// uni.showLoading({
								// 	title: this.progressBar
								// });
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								console.log(res)
								const uploadTask = uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePath,
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										that.videoUrl = url.data
										uni.hideLoading();
									},
									fail: res => {
										console.log(res)
									},
									// 监听上传进度变化
									onProgressUpdate: function(progressEvent) {
										console.log(progressEvent.progress); // 进度百分比
										console.log(progressEvent
											.totalBytesExpectedToSend); // 预期总字节数
										console.log(progressEvent
											.totalBytesSent); // 已经上传的字节数
										// 根据进度百分比，可以在页面上显示上传进度
									}
								});
								// 上传进度变化监听
								uploadTask.onProgressUpdate((res) => {
									// uni.showLoading({
									// 	title: '上传进度' + res.progress + '%' // 动态更新加载提示框的标题
									// });
									// uni.showToast({
									// 	title: '上传进度' + res.progress + '%',
									// 	icon: "none",
									// 	duration: 1000,
									// })
									that.progressBar = res.progress
									if (res.progress === 100) {
										// uni.hideLoading(); // 当进度达到100%时隐藏加载提示框
										setTimeout(function() {
											that.showJd = false
										}, 1000)
									}

									// console.log('上传进度' + res.progress + '%');
									// 根据进度显示上传进度，比如更新页面数据
								});

								// 上传错误监听
								// uploadTask.onError((error) => {
								// 	console.error('上传失败', error);
								// });
							},

						});
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// getUserInfo() {
			// 	let userId = uni.getStorageSync('userId')
			// 	this.$u.api.userinfo().then(res => {
			// 		if (res.code == 0) {
			// 			this.userName = res.data.userName;
			// 			this.phone = res.data.phone;
			// 			this.phones = res.data.phone
			// 			this.headImg = res.data.avatar;
			// 		}
			// 	})
			// },
			//根据正则验证手机号是否正确包括校验长度
			checkPhone(phone) {
				return /^1[3456789]\d{9}$/.test(phone);
			},
			// 保存
			messagebtn() {
				if (this.courseDetailsName == '') {
					uni.showToast({
						title: "请输入短剧名称",
						icon: "none"
					})
					return
				} else if (this.videoUrl == '') {
					uni.showToast({
						title: "请上传视频",
						icon: "none"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定保存信息',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							var data = {
								courseId: this.courseId,
								courseType: this.courseType,
								courseDetailsName: this.courseDetailsName,
								videoUrl: this.videoUrl,
								isPrice: this.isPrice,
								price: this.price,
								titleImg: this.titleImg,
								goodNum: this.goodNum,
								content: this.content,
								sort: this.sort,
								good: this.good
							}
							if (that.editType == 0) {
								this.$u.post("/app/user/insertCourseDetailsByApp", data).then(res => {
									if (res.code === 0) {
										uni.showToast({
											title: '新增成功',
											icon: "none"
										})
										setTimeout(function() {
											uni.navigateBack()
										}, 1000)
									} else if (res.code === -1) {
										uni.showModal({
											title: '温馨提示',
											content: res.msg,
											cancelText: "取消", // 取消按钮的文字
											confirmText: "去商城", // 确认按钮的文字 
											confirmColor: '#8B8FF0',
											success: e => {
												if (e.confirm) {
													uni.navigateTo({
														url: '/me/shop/index'
													});
												}
											}
										});

									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										})
									}
								});
							} else {
								data.courseDetailsId = this.courseDetailsId
								this.$u.post("/app/user/updateCourseDetailsByApp", data).then(res => {
									if (res.code === 0) {
										uni.showToast({
											title: '编辑成功',
											icon: "none"
										})
										setTimeout(function() {
											uni.navigateBack()
										}, 1000)
									} else if (res.code === -1) {
										uni.showModal({
											title: '温馨提示',
											content: res.msg,
											cancelText: "取消", // 取消按钮的文字
											confirmText: "去商城", // 确认按钮的文字 
											confirmColor: '#8B8FF0',
											success: e => {
												if (e.confirm) {
													uni.navigateTo({
														url: '/me/shop/index'
													});
												}
											}
										});

									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
											duration: 5000
										})
									}
								});
							}


						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background: #F7F8FF;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		overflow: hidden;
		color: #666666;
		/* background-color: #fff; */
		background-color: rgba(255, 255, 255, 0) !important;
		width: 100%;
		height: 100%;
	}

	.usermain {
		/* background: #FFFFFF; */
	}

	.usermain-item {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		/* border-bottom: 2rpx solid #f2f2f2; */
		padding: 20rpx 16rpx;
	}

	.usermain-item.item-padding {
		// padding: 10rpx 40rpx 10rpx 0;
	}

	.valuscss {
		// width: 80%;
	}

	.cu-form-group {
		padding: 0;
		background: #FFFFFF;
		/* text-align: right; */
	}

	.cu-form-group input {
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;

	}

	.footer-btn {
		margin-top: 40rpx;
	}

	.footer-btn .usermain-btn {
		color: #FFFFFF;
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		text-align: center;
		width: 686rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		margin: 0 auto;
		border-radius: 40rpx;
	}

	.label_text {
		font-weight: bold;
		font-size: 28rpx;
		color: #1A1A1A;
	}
	
	.sort_box{
		display: flex;
		align-items: center;
		image{
			width: 28rpx !important;
			height: 28rpx !important;
			border-radius: 0 !important;
			margin: 0 !important;
		}
		text{
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			padding: 0 35rpx;
		}
	}
	
	.up_pro_box_content{
		width: 200rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text{
			&:nth-of-type(1){
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
			&:nth-of-type(2){
				font-weight: bold;
				font-size: 24rpx;
				color: #FD7885;
			}
		}
		image{
			width: 50rpx;
			height: 50rpx;
			margin: 20rpx 0;
		}
	}
</style>